<script>
export default {
  name: "NewList",
  data(){
    return {
      newsList:[
        {id:1001,title:'标题1',author:'jack',time:'2024-12-1'},
        {id:1002,title:'标题2',author:'jack',time:'2024-12-2'},
        {id:1003,title:'标题3',author:'jack',time:'2024-12-3'},
        {id:1004,title:'标题4',author:'jack',time:'2024-12-4'}
      ]
    }
  },
  mounted() {
    //获取本地存储的数据
    let test = localStorage.getItem('name');
    console.log(test)
  },
  methods:{
    goView(id){
      console.log(id)
      //注意：params不能与path一起使用
      // this.$router.push('/news/'+id);
      this.$router.push(`news/${id}`);//模板语法
    },
    goPage(id){
      this.$router.push({name:'news2',query:{id:id}});
    }
  }
}
</script>

<template>
    <h3>这是新闻列表</h3>
<!--    <ul class="list">
      <li v-for="(news,index) in newsList" :key="index">
        &lt;!&ndash;模板语法&ndash;&gt;
        <router-link :to="`/news/${news.id}`">{{news.title}}</router-link>
      </li>
    </ul>
  <hr>
  <ul class="list">
    <li v-for="(news,index) in newsList" :key="index">
      &lt;!&ndash;模板语法&ndash;&gt;
      <router-link :to="`/news2?id=${news.id}`">{{news.title}}</router-link>
    </li>
  </ul>-->
<!--  <h3>命名路由</h3>
  <ul class="list">
    <li v-for="(news,index) in newsList" :key="index">
      &lt;!&ndash;模板语法&ndash;&gt;
      <router-link :to="{name:'news3',params:{id:news.id}}">{{news.title}}</router-link>
    </li>
  </ul>
  <hr>
  <ul class="list">
    <li v-for="(news,index) in newsList" :key="index">
&lt;!&ndash;  命名路由：通过路由的名称来路由    &ndash;&gt;
      <router-link :to="{name:'news2',query:{id:news.id}}">{{news.title}}</router-link>
    </li>
  </ul>-->
<h3>编程式路由</h3>
  <ul class="list">
    <li v-for="(news,index) in newsList" :key="index">
      <a href="#" @click="goView(news.id)">{{news.title}}</a>
    </li>
  </ul>
  <hr>
  <ul class="list">
    <li v-for="(news,index) in newsList" :key="index">
      <button @click="goPage(news.id)">{{news.title}}</button>
    </li>
  </ul>
  <button @click="this.$router.go(-1)">返回</button>


<!-- 显示新闻详情  -->
  <div class="detail">
      <RouterView/>
  </div>
</template>

<style scoped>

</style>